<template>
    <div class="register-wrap">
		<NavBar />
		<el-form class="register-container">
			<h1 class="title">用户注册</h1>
            <el-form-item label="">
				<el-input type="name" v-model="name" placeholder="姓名" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="phone" v-model="phone" placeholder="登录账号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
			</el-form-item>
			<el-row style="text-align: center;margin-top:-10px">
				<el-link type="primary" @click="goLogin()">用户登录</el-link>
			</el-row>
		</el-form>
	</div>
</template>
  
<script>
import axios from 'axios';
import NavBar from '../components/NavBar.vue';
export default {
  name: 'userRegister',
  data () {
    return {
        name:"",
        phone:"",
        password:""
    }
  },
  components: {
    NavBar
  },
  methods: {
		goLogin(){
      this.$router.push({ path:'/login'});
    },
    doSubmit(){
      axios.post('http://localhost:8081/users/register',{
				userName:this.name,
				phoneNumber:this.phone,
				password:this.password
			})
			.then(response =>{
				if(response.data === 'User registered successfully!'){
					this.$message.success('注册成功！');
					this.$router.push('/login');
				}else{
					this.$message.error('注册失败');
				}
			})
			.catch(error =>{
				this.$message.error('注册失败，请重新注册');
				console.error('Error:' ,error);
			})
    }
  },
  
}
</script>
  
<style>
  .register-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.register-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>
  